<style lang="stylus" scoped>
bgBlue = linear-gradient(to right, #04befe, #4481eb)
.box
  background url('./imgs/bg13.png') 100% 100% no-repeat
  width 100%
  height 19rem
  padding 2rem 0 0 0
.tip-r
  text-align right
  font-size 1.4rem
  color #fff
  padding-right 7px
  margin-bottom 1rem
.left, .right
  display inline-block
  width 50%
  float left
  color #ffffff
  font-size 2.4rem
  text-align center
  margin-bottom 6.2rem
  p
    font-size 1.6rem
.section1
  width 100%
  marquee
    background url('./imgs/icon-10@2x.png') 1rem 50% no-repeat
    background-size 15px 15px
    a
      display inline-block
      width 100%
      text-indent 3.5rem
      color #666
      font-size 1rem
  li
    display inline-block
    list-style-type none
    float left
    width 25%
    text-align center
    border-top 1px solid #f3f3f3
    img
      display inline-block
      width 4rem
      margin 1rem 0 0 0
    a
      color #666
.list
  clear both
  display inline-block
  padding-top 8px
  background #eee
  margin-bottom 6rem
  .btn
    line-height 1.3rem
    float right
    margin 2rem 1rem
    background bgBlue
  li
    display inline-block
    list-style-type none
    border-top 1px solid #f1f1f1
    width 100%
    background #fff
    float left
    div
      display inline-block
      float left
  .type1
    background-size 3.5rem
  .type2
    .text
      p
        line-height 5
        font-size 1.6rem
        text-indent 2rem
  .iconhead
    text-align center
    .imgbox
      display inline-block
      width 5rem
      height 5rem
      border 1px solid #dddddd
      border-radius 50%
      padding 0.4rem
      margin 10px 1rem 0 1rem
    p
      text-align right
      margin-right 1.5rem
    img
      display inline-block
      width 4rem
  .text
    border-left 1px solid #ddd
    height 5rem
    p
      span
        display inline-block
        text-align center
        width 7rem
  .num
    color #4184ec
    font-size 3.8rem
    i
      font-size 1.4rem
      color #666
      font-style normal
</style>
<template>
  <div class="box">
    <router-link to="reward">
      <p class="tip-r">奖励说明</p>
    </router-link>
    <router-link to="withdraw" class="left">
      <h1 v-if="this.$store.state.show">{{expected}}</h1>
      <h1 v-else>0</h1>
      <p>预计收益</p>
    </router-link>
    <router-link to="withdraw?moneyType=actual" class="right">
      <h1 v-if="this.$store.state.show">{{actual}}</h1>
      <h1 v-else>0</h1>
      <p>实际收益</p>
    </router-link>
    <section class="section1">
      <marquee direction="up" scrollamount="1" style="width: 100%;height: 20px;line-height:20px" id="">
        <a>用户173*****668成功申请交通银行信用卡,奖励10.00元</a> <a>用户158*****003成功申请民生银行信用卡,奖励55.00元</a> <a>用户158*****332成功申请民生银行信用卡,奖励55.00元</a>
        <a>用户173*****668成功申请交通银行信用卡,奖励75.00元</a> <a>用户158*****003成功申请民生银行信用卡,奖励55.00元</a> <a>用户158*****332成功申请民生银行信用卡,奖励55.00元</a>
        <a>用户173*****668成功申请交通银行信用卡,奖励75.00元</a> <a>用户158*****003成功申请民生银行信用卡,奖励55.00元</a> <a>用户158*****332成功申请民生银行信用卡,奖励55.00元</a>
        <a>用户173*****668成功申请交通银行信用卡,奖励75.00元</a> <a>用户158*****003成功申请民生银行信用卡,奖励55.00元</a> <a>用户158*****332成功申请民生银行信用卡,奖励55.00元</a>
      </marquee>
      <ul>
        <li>
          <router-link to="gainrecord">
            <img src="./imgs/icon-11@2x.png" alt="">
            <p>收益记录<br />奖励金额有明细</p>
          </router-link>
        </li>
        <li>
          <router-link to="Qrcode">
            <img src="./imgs/icon-12@2x.png" alt="">
            <p>分享好礼<br>每日可赚千元</p>
          </router-link>
        </li>
        <li>
          <router-link to="progress">
            <img src="./imgs/icon-13@2x.png" alt="">
            <p>进度查询<br>随时随地查询</p>
          </router-link>
        </li>
        <li>
          <router-link to="inputinfo">
            <img src="./imgs/icon-14@2x.png" alt="">
            <p>快速提额<br>秒批,易下,额度大</p>
          </router-link>
        </li>
      </ul>
    </section>
    <section class="list">
      <ul >

        <li v-for="item in bankList" :key="item.bankId" class="type1">
          <div class="iconhead">
            <span class="imgbox">
              <img :src="item.img" alt="">
            </span>
            <p>{{item.bankName}}</p>
          </div>
          <div class="text">
            <p><span class="num">{{item.bankBonus}}<i>元</i></span><span>新户核卡 月卡</span></p>
            <p><span>办卡奖励金额</span><span>奖励条件</span></p>
          </div>
          <!-- <a :href="'http://'+item.urlCreateCard"> -->
          <router-link to="inputinfo">
          <a>
            <Button class="btn" type="primary" shape="circle">立即办卡</Button>
          </a>
          </router-link>
        </li>

       <!-- <li class="type1">
          <div class="iconhead">
            <span class="imgbox">
              <img src="./imgs/bank2.png" alt="">
            </span>
            <p>广发银行</p>
          </div>
          <div class="text">
            <p><span class="num">90 <i>元</i></span><span>新户核卡 月卡</span></p>
            <p><span>办卡奖励金额</span><span>奖励条件</span></p>
          </div>
          <Button class="btn" type="primary" shape="circle">立即办卡</Button>
        </li>
        <li class="type2">
          <div class="iconhead">
            <span class="imgbox">
              <img src="./imgs/bank3.png" alt="">
            </span>
            <p>广发银行</p>
          </div>
          <div class="text">
            <p>不参与奖励</p>
          </div>
          <Button class="btn" type="primary" shape="circle">立即办卡</Button>
        </li> -->
      </ul>
    </section>

  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "SpeedCard",
  data() {
    return {
      expected: 0,
      actual: 0,
      bankList: []
    };
  },
   mounted () {
    // if(!this.$store.state.show){
    //   this.$router.push({path: '/'});
    // }
  },
  created() {
    var _this = this;
    axios
      .post("web/api/user/expectedReturn", {
        "userId":_this.$store.state.user.userId
      })
      .then(function(res) {
        var data = res.data.date;
        _this.cardList = data;
        console.log("aaaaaaaa",data);
        _this.expected = data.expectedReturn;
        console.log(_this.expected);
        _this.actual = data.actualIncome;
        console.log(_this.actual);
        // _this.$Message.success('This is a success tip');
        // _this.$router.push('/');
      })
      .catch(function(error) {
        console.log(error);
      });
    axios
      .post("web/api/bank/list")
      .then(function(res) {
        console.log("银行列表：", res);
        var data = res.data.date;
        if (res.data.code === 1) {
          _this.bankList = data;
        }
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  methods: {}
};
</script>


